<template>
    <div class="swerper">
        <div class="swerper-v" :style="{width:list.length*100+'%',transform: 'translateX(-'+(100/list.length)*swerper_index+'%)',transition:change_time?((obj.duration/1000||1.5)+'s'):''}" >
            <img v-for="(item,index) in list" :key="index" :style="{width:100/list.length+'%'}" class="top-img" :src="item.src" />
        </div>
        <div class="swerper-dian" v-if="obj.indicator_dots">
            <div v-for="(item,index) in list.length" :key="index" v-show="obj.circular?(index!=0 && index!=(list.length-1)):true"
                :class="(swerper_item_index == index)?'swerper-dian-xiao swerper-dian-da':'swerper-dian-xiao'" 
                :style="{transition:obj.duration>=0?((obj.duration/1000||1.5)+'s'):''}"
                @click.stop="chooseSwerper(index)"
                ></div>
        </div>
    </div>
</template>
<script>
//使用方法 -s
//  <Swiper :list="swerper_arr" :obj="swiper_obj" @change="change"></Swiper>
// swiper_obj:{
//                 autoplay:true,  //是否开始自动播放
//                 'indicator_dots':true, //是否显示点
//                 interval:5000, //自动切换时间间隔
//                 duration:1500, //滑动动画时长
//                 circular:true,  //是否采用衔接滑动，即播放到末尾后重新回到开头
//             },
//             swerper_arr:[
//                 {
//                     src:require('./assets/top_img1.png'),
//                 },
//                 {
//                     src:require('./assets/top_img2.png'),
//                 },
//                 {
//                     src:require('./assets/top_img3.png'),
//                 },
//             ],

//使用方法 -e
export default {
    props:{
        list:{
            type:Array,
        },
        obj:{
            type:Object,
        }
    },
    data () {
      return {
        change_time:true, //是否开启了过度时间，只在衔接滑动时这个有用，用于最后一块滑动到第一块时用
        swerper_index:1, //内部用
        time1:0, //定时器
        time2:0,  //定时器
        swerper_item_index:1,  //滑块的位置，外部一般用这个
        swerper_time:0,  //定时器
      }
    },
    created(){
        if(this.obj.circular){  //衔接滑动
            let img_start = this.list[0];
            let img_last = this.list[this.list.length-1];
            this.list.unshift(img_last);
            this.list.unshift(img_start);
        }else{
            this.swerper_index = 0;
            this.swerper_item_index = 0;
        }
        //防止切换过度的时间小于切换的时间
        if(this.obj.interval && this.obj.duration && this.obj.interval <= this.obj.duration){
            this.obj.interval = this.obj.duration+100;
        }
    },
    mounted(){
        if(this.obj.circular){
            this.startSwerper();
        }else{
            this.start();
        }
    },
    methods: {
        start(){  //无衔接滑动的定时器
            if(!this.obj.autoplay){
                return ;
            }
            this.swerper_time = setInterval(()=>{
                if(this.swerper_index == this.list.length-1){
                    this.swerper_item_index = 0;
                    this.swerper_index = 0;
                }else{
                    this.swerper_item_index += 1;
                    this.swerper_index += 1;
                }
                this.changeSwiper(this.swerper_item_index);
            },this.obj.interval||8000);
        },
        startSwerper(){  //this.obj.circular为true的轮播自动切换
            if(!this.obj.autoplay){
                return ;
            }
            this.swerper_time = setInterval(()=>{
                this.swerper_index += 1;
                if(this.swerper_index == this.list.length-1){
                    this.swerper_item_index = 1;
                    this.time1 = setTimeout(()=>{
                        this.change_time = false;
                        this.swerper_index = 1;
                        clearTimeout(this.time1);
                    },this.obj.duration||1500);
                    this.time2 = setTimeout(()=>{
                        this.change_time = true;
                        clearTimeout(this.time2);
                    },(this.obj.duration||1500)*2);
                }else{
                    this.swerper_item_index += 1;
                }
                this.changeSwiper(this.swerper_item_index);
            },this.obj.interval||8000);
        },
        chooseSwerper(e){  //轮播点击按钮切换
            this.changeSwiper(e);
            clearInterval(this.swerper_time);  //点击后重新计时切换
            if(this.obj.circular){
                this.change_time = true;
                clearTimeout(this.time1);
                clearTimeout(this.time2);
                this.startSwerper();
            }else{
                this.start();
            }
            this.swerper_item_index = e;
            this.swerper_index = e;
        },
        changeSwiper(e){  //切换item时触发
            if(this.obj.circular){
                this.$emit('change',e-1);
            }else{
                this.$emit('change',e);
            }
            
        }
　　}
}
</script>

<style scoped>
.swerper{
    position:relative;
    width:100%;
    overflow:hidden;
}
.swerper-v{
    position:relative;
}
.swerper-show{
    position:absolute;
    top:0;
    padding-left:120px;
    display:flex;
    height:100%;
    flex-direction: column;
    justify-content: center;
    color: #FFFFFF;
}
.swerper-show-t{
    font-size:40px;
    font-weight:600;
}
.swerper-show-c{
    width: 50px;
    height: 3px;
    margin:20px 0 40px;
    background: #FFFFFF;
}
.swerper-show-f{
    
}
.top-img{
    height:auto;
}
.swerper-dian{
    position:absolute;
    bottom:20px;
    left:0;
    display:flex;
    justify-content: center;
    width:100%;
}
.swerper-dian-xiao{
    width: 20px;
    height: 6px;
    margin:0 10px;
    background: #4383D2;
}
.swerper-dian-da{
    width: 70px;
    background: #FFFFFF;
}
</style>